<!-- @format -->

<template>
    <div class="layout">
        <aside>
            <RouterLink to="/welcome" active-class="active">欢迎</RouterLink>

            <br />
            <RouterLink to="/vue3Study" active-class="active" replace>vue3学习</RouterLink>
        </aside>
        <div class="layout-right">
            <header>header<br />{{ userStore.userInfo.name }}</header>
            <main>
                <RouterView />
            </main>
            <footer>footer</footer>
        </div>
    </div>
</template>
<script setup lang="ts">
import {RouterView, RouterLink} from 'vue-router';
import {useUserStore} from '@/store/user';

const userStore = useUserStore();
</script>
<style scoped>
.layout {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

.layout aside {
    width: 200px;
}

.layout-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.layout-right header {
    height: 60px;
    background-color: purple;
}

.layout-right main {
    flex: 1;
    background-color: gray;
    overflow-y: auto;
}

.layout-right footer {
    height: 40px;
    background-color: yellow;
}

.layout aside a.active {
    color: orange;
}
</style>
